import React, { Component } from "react";
import Select from 'react-select';
const customStyles = {
  option: (provided, state) => {
    return {
      ...provided,
      borderBottom: '1px solid #ddd',
      color: (state.isSelected || state.isFocused) ? '#fff' : '#565656',
      padding: '4px 0px 4px 10px',
      background:(state.isSelected || state.isFocused) ? '#2D95FF' : '#fff',
      lineHeight:'15px',
      ':hover': {
        background: '#2D95FF',
        color: '#fff',
      },
      ':last-child': {
        borderBottom:'none',
      },
    }
  },
  dropdownIndicator: (provided) => {
    return {
      ...provided,
      padding:'6px'
    }
  },
  control: (provided, state) => {
    return {
      ...provided,
      minHeight:'34px',
      borderColor:state.isFocused ? '#66afe9' : '#b9b9b9',
      boxShadow:null,
      ':hover': {
        borderColor: '#66afe9'
      },
    }
  },
  multiValueLabel: (provided) => {
    return {
      ...provided,
      fontSize:'12px'
    }
  },
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';
    return { ...provided, opacity, transition };
  }
}/*自定义select控件样式*/

export default class selectSearch extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      selectOption:[
        {value:'781',label:'锐格泰克信息技术有限公司'},
        {value:'700',label:'深圳蔓琼贸易有限公司'},
        {value:'701',label:'asd啊实打实asd多公司'},
        {value:'702',label:'Ben-Milkyway Distribution'},
        {value:'703',label:'DHHT_Geekvida.pt 丹宏昊天S03部门'},
        {value:'704',label:'DHHT_测试账户'},
        {value:'705',label:'DHHT_俄罗斯分公司 丹宏昊天S09部门'},
        {value:'706',label:'doogee 电商部门'},
        {value:'707',label:'doogee批发售后部'},
        {value:'708',label:'oukitel深圳市云基智能科技有限公司平台账户'},
        {value:'709',label:'tomrepair 德国商业维修 T01部门'},
        {value:'720',label:'tr测试电商客户'},
        {value:'721',label:'vernee 电商'},
      ],
    }
  }
 
  handleChange = (selectedOption) => {
    console.log(`Option selected:`, selectedOption);
  }

  filterOption(option, inputValue){
    var label = option.label.toLowerCase(),
        tempArray = inputValue.split(" "),
        tempFlag = true;
    for(var i = 0; i < tempArray.length; i++){
      if(tempArray[i] !== ''){
        if(label.indexOf(tempArray[i].toLowerCase()) !== -1){
          tempFlag = true;
          continue;
        }else{
          tempFlag = false;
          break;
        }
      }
    }
    return tempFlag;
  }/*自定义select控件搜索规则,支持多个关键字搜索, 多个关键字用空格隔开*/

  render() {
    var _this = this;
    return (
      <Select
        placeholder="请选择"
        styles={customStyles}
        isMulti={_this.props.isMulti?true:false}
        onChange={_this.handleChange}
        options={_this.state.selectOption}
        filterOption={_this.filterOption} 
        hideSelectedOptions={false}
      />
    );
  }
}